import React from 'react'
import { Col, Divider, Modal, Row, Tag, Tree } from 'antd'
import DiffProgramModal from './commons/diff-program-modal'
import DiffTaskModal from './commons/diff-task-modal'
import DiffTopicModal from './commons/diff-topic-modal'

const {TreeNode} = Tree
const TagColor = {
  'Created': '#87d068',
  'No-Change': '#f50',
  'Changed': '#108ee9'
}
const CREATE = 1
export default class TreeView extends React.Component {
  state = {
    diffType: '',
    source: {},
    diff: {}
  }
  findParentIds = (diffPrograms, sourceProgram, ids) => {
    const found = diffPrograms.find(item => item.programId === sourceProgram.fromId)
    if (found) {
      ids.push(found.programId)
      this.findParentIds(diffPrograms, found, ids)
    }
    return ids
  }

  findSameParent = (diffPrograms, sourceProgram, diffProgram) => {
    const sourceParentIds = this.findParentIds(diffPrograms, sourceProgram, [sourceProgram.programId])
    const diffParentIds = this.findParentIds(diffPrograms, diffProgram, [diffProgram.programId])
    const sameParentId = sourceParentIds.find(id => diffParentIds.includes(id))
    return diffPrograms.find(item => item.programId === sameParentId)
  }
  sameAssignments = (sourceAssignments = [], diffAssignments = []) => {
    if (diffAssignments.length === 0) return false
    if (sourceAssignments.length !== diffAssignments.length) return false
    return sourceAssignments.every(item => {
      return diffAssignments.find(ass => {
        return ass.quizzesId === item.quizzesId && item.title === item.title
      })
    })
  }

  findStatusByTask = (task, sameTask, diffTask) => {
    if (!diffTask.id || task.operation === CREATE) return 'Created'
    if (task.title === diffTask.title && task.content === diffTask.content
      && this.sameAssignments(task.assignments, diffTask.assignments)) {
      return 'No-Change'
    }
    return 'Changed'
  }

  getTasksNode = (sourceTasks = [], sameTasks = [], diffTasks = []) => {
    return sourceTasks.map(task => {
      const parentTask = sameTasks.find(item => item.taskId === task.fromId || item.taskId === task.taskId) || {}
      const diffTask = diffTasks.find(item => item.fromId === parentTask.taskId || item.taskId === parentTask.taskId) || {}
      const status = this.findStatusByTask(task, parentTask, diffTask)
      return <TreeNode title={<span>
        <Tag color={TagColor[status]}>{status}</Tag>
        {task.title}
        <Divider type='vertical'/>
        <a onClick={() => this.diff('TASK', task, diffTask)}>Diff</a>
      </span>}/>
    })
  }
  findStatusByTopic = (topic, sameTopic, diffTopic) => {
    if (!diffTopic.id) return 'Created'
    if (topic.title === diffTopic.title) return 'No-Change'
    return 'Changed'
  }

  getTopicsNode = (sourceTopics = [], sameTopics = [], diffTopics = []) => {
    return sourceTopics.map(topic => {
      const parentTopic = sameTopics.find(item => item.topicId === topic.fromId || item.topicId === topic.topicId) || {}
      const diffTopic = diffTopics.find(item => item.fromId === parentTopic.topicId || item.topicId === parentTopic.topicId) || {}
      const status = this.findStatusByTopic(topic, parentTopic, diffTopic)
      return <TreeNode title={
        <span>
        <Tag color={TagColor[status]}>{status}</Tag>
          {topic.title}
          <Divider type='vertical'/>
        <a onClick={() => this.diff('TOPIC', topic, diffTopic)}>Diff</a>
      </span>
      }>
        {
          this.getTasksNode(topic.tasks, parentTopic.tasks, diffTopic.tasks)
        }
      </TreeNode>
    })
  }
  getTreeNodes = (source, same, diff) => {
    return <TreeNode
      title={<span> {source.title}
        <Divider type='vertical'/>
      <a onClick={() => this.diff('PROGRAM', source, diff)}>Diff</a></span>}
    >
      {
        this.getTopicsNode(source.topics, same.topics, diff.topics)
      }

    </TreeNode>
  }

  diff = (diffType, source, diff) => {
    this.setState({
      diffType,
      source,
      diff
    })
  }
  cancel = () => {
    this.setState({
      diffType: '',
      source: {},
      diff: {}
    })
  }

  render () {
    const {diffType, source, diff} = this.state
    const {sourceProgramId, diffProgramId, diffPrograms} = this.props
    const sourceProgram = diffPrograms.find(item => item.programId === parseInt(sourceProgramId)) || {}
    const diffProgram = diffPrograms.find(item => item.programId === parseInt(diffProgramId)) || {}
    const sameParent = this.findSameParent(diffPrograms, sourceProgram, diffProgram) || {}
    return (
      <Row type='flex' justify='center'>
        <Col span={11}>
          <h3>当前训练营</h3>
          {
            sourceProgram.id
              ? <Tree
                defaultExpandAll
                showLine
                className="hide-file-icon"
              >
                {
                  this.getTreeNodes(sourceProgram, sameParent, diffProgram)
                }
              </Tree>
              : ''
          }

        </Col>
        <Col span={11}>
          <h3>diff训练营</h3>
          {
            diffProgram.id
              ? <Tree
                defaultExpandAll
                showLine
                className="hide-file-icon"
              >
                {
                  this.getTreeNodes(diffProgram, sameParent, sourceProgram)
                }

              </Tree>
              : '请在左侧tree选择需要diff的训练营'
          }

        </Col>
        {
          diffType === 'PROGRAM'
            ? <Modal
              visible={true}
              width={'90%'}
              onCancel={this.cancel}
              footer={null}
            >
              <DiffProgramModal
                source={source}
                diff={diff}
              />
            </Modal>
            : ''
        }{
        diffType === 'TOPIC'
          ? <Modal
            visible={true}
            width={'90%'}
            onCancel={this.cancel}
            footer={null}
          >
            <DiffTopicModal
              source={source}
              diff={diff}
            />
          </Modal>
          : ''
      }{
        diffType === 'TASK'
          ? <Modal
            visible={true}
            width={'90%'}
            onCancel={this.cancel}
            footer={null}
          >
            <DiffTaskModal
              source={source}
              diff={diff}
            />
          </Modal>
          : ''
      }
      </Row>
    )
  }
}